<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 业务管理 </el-breadcrumb-item>
                <el-breadcrumb-item>新增会员</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="120px" :rules="rules">
                    <el-form-item label="用户姓名" prop="name">
                        <el-input v-model="form.name" style="width: 80px"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="tel">
                        <el-input v-model="form.tel" style="width: 120px"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="id_no">
                        <el-input v-model="form.id_no" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号" prop="bank_no">
                        <el-input v-model="form.bank_no" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="用户开卡时长" prop="cardtime">
                        <el-select v-model="form.cardtime" placeholder="请选择">
                            <el-option key="1" label="一年" value=1></el-option>
                            <el-option key="2" label="两年" value=2></el-option>
                            <el-option key="3" label="三年" value=3></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">新增会员</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { submitMember } from '../../api/testIndex.js';
export default {
    name: 'baseform',
    data() {
        return {
            rules: {
                cardtime: [{ required: true, message: '请选择会员卡开卡时长', trigger: 'change' }],
                name: [
                    { required: true, message: '请填写姓名', trigger: 'blur' },
                    { min: 2, message: '最少两个字符', trigger: 'blur' }
                ],
                tel: [
                    { required: true, message: '请填写十一位电话号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '请填写十一位电话号码', trigger: 'blur' }
                ],
                id_no: [
                    { required: true, message: '请填写十八位身份证号', trigger: 'blur' },
                    { min: 18, max: 18, message: '请填写十八位身份证号', trigger: 'blur' }
                ],
                bank_no: [
                    { required: true, message: '请填写十九位银行卡号', trigger: 'blur' },
                    { min: 19, max: 19, message: '请填写十九位银行卡号', trigger: 'blur' }
                ]
            },
            form: {
                name: '',
                tel: '',
                id_no: '',
                bank_no: '',
                cardtime: ''
            }
        };
    },
    methods: {
        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    submitMember(this.form).then((res) => {
                        console.log(res);
                    });
                    this.$message.success('提交成功！');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>